<template>
  <div class="map">
    <div class="map1"><img src="@/assets/images/overView/map-bg.png" /></div>
    <div id="map_1" class="map2" />
  </div>
</template>

<script lang="ts" setup>
import NeimengguJSON from '@/assets/map/province/neimenggu.json';
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

interface Props {
  mapData?: any;
}
const props = withDefaults(defineProps<Props>(), {
  mapData: () => {},
});

const emit = defineEmits(['change-station']);

const title: any = inject('title');

const mapList = ref([] as any[]);
const myChart = ref();
const stationId = ref();

const initEcharts = (map: any, list?: any) => {
  let option = {};
  option = {
    tooltip: {
      trigger: 'item',
      padding: 0,
      backgroundColor: 'rgba(0,0,0,0)',
      borderWidth: 0,
      className: 'echarts-tooltip',
    },
    geo: {
      map: map,
      left: 'center',
      top: 'middle',
      emphasis: {
        label: {
          show: true,
        },
        itemStyle: {
          areaColor: 'rgba(102,241,250,0.8)',
        },
      },
      roam: true,
      itemStyle: {
        areaColor: 'rgba(63,149,250,0.8)',
        color: 'rgba(0,0,0,0.7)',
      },
      tooltip: {
        show: true,
        formatter: (params: any) => {},
      },
      layoutCenter: ['50%', '50%'],
      // layoutSize: 100,
      scaleLimit: {
        min: 1.2,
        //   max: 3
      },
      zoom: 1.2, // 缩放
      // zoom: 7.1,
    },
    series: [
      {
        name: '',
        type: 'effectScatter',
        geoIndex: 0,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
        },
        tooltip: {
          show: true,
          formatter: (params: any) => {
            // console.log('series', params);
            const toolData = params?.data || {};
            const toolTiphtml = `
                  <div class='tip'>
                    <div class='tip-title' style='font-size:13px'>${toolData.stationName}</div>
                    <div class='tip-adr'>位置：${toolData.address}</div>
                    <div class='tip-alt'>直流枪数量：${toolData.countFreeConnectorDC}/${toolData.countConnectorDC}</div>
                    <div class='tip-dir'>交流枪数量：${toolData.countFreeConnectorAC}/${toolData.countConnectorAC}</div>
                  </div>
                `;
            return toolTiphtml;
          },
        },
        coordinateSystem: 'geo',
        data: convertData(list),
        symbolSize: function (val: any) {
          // console.log(val);
          const v1 = val[3] ? Number(val[3]) : 0;
          const v2 = val[4] ? Number(val[4]) : 0;
          if (v1 + v2 > 20) {
            return 20;
          } else if (v1 + v2 < 10) {
            return 10;
          } else {
            return v1 + v2;
          }
        },
        label: {
          formatter: '{b}',
          position: 'center',
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        itemStyle: {
          color: '#F3CC26',
        },
        clip: true,
      },
    ],
  };
  myChart.value.setOption(option, true);
};

const convertData = (data: any) => {
  if (!data) {
    return [];
  }
  const res: any[] = [];
  data.forEach((item: any, index: number) => {
    if (item.stationLat && item.stationLng) {
      res.push({
        ...item,
        name: item.stationName || '—',
        address: item.address || '—',
        countFreeConnectorAC: item.countFreeConnectorAC || 0,
        countConnectorAC: item.countConnectorAC || 0,
        countFreeConnectorDC: item.countFreeConnectorDC || 0,
        countConnectorDC: item.countConnectorDC || 0,
        value: [
          item.stationLng,
          item.stationLat,
          index,
          item.countConnectorAC,
          item.countConnectorDC,
        ],
      });
    }
  });
  // console.log('res---', res);
  return res;
};

const refreshMap = () => {
  myChart.value.off('click');
  myChart.value.off('dblclick');
  myChart.value.on('click', (param: any) => {
    console.log('single,', param);
    if (
      param.componentType === 'series' &&
      param?.data?.id &&
      stationId.value !== param?.data?.id
    ) {
      stationId.value = param?.data?.id;
      title.value = param?.data?.stationName;
      emit('change-station', stationId.value);
    }
  });
  myChart.value.getZr().on('dblclick', (param: any) => {
    console.log('dblclick,', param);
    if (!param.target || param.componentType === 'geo') {
      if (!stationId.value) {
        return;
      }
      stationId.value = '';
      title.value = '国天智充运营管理平台';
      emit('change-station', '');
    }
  });
  initEcharts('内蒙古', mapList.value);
};

const initMap = () => {
  // 基于准备好的dom，初始化echarts实例
  const chartDom = document.getElementById('map_1');
  if (chartDom && !myChart.value) {
    console.log('initMap');
    myChart.value = echarts.init(chartDom);
    echarts.registerMap('内蒙古', NeimengguJSON as any);
    window.addEventListener('resize', myChart.value.resize());
    refreshMap();
  }
};

watch(
  () => props.mapData,
  (newVal, oldVal) => {
    console.log('watch', newVal, oldVal);
    mapList.value = newVal.largeScreeStationDTOList || [];
    refreshMap();
  }
);

onMounted(() => {
  initMap();
});
onUnmounted(() => {
  window.removeEventListener('resize', myChart.value.resize());
});
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  height: 100%;
  z-index: 1;
  width: 100%;
}
.map2 {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.map1 {
  width: 743px;
  height: 960px;
  z-index: -1;
  top: -240px;
  left: -90px;
  transform-origin: center 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
.map1 {
  position: absolute;
}
::v-deep(.echarts-tooltip) {
  .tip {
    width: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    padding: 5px;
    color: #fff;
    &-title {
      padding: 2px 5px;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
      font-size: 10px !important;
    }
    &-adr {
      padding: 0 5px;
      font-size: 8px;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    &-alt {
      color: #2eefdb;
      padding: 0 5px;
      font-size: 8px;
    }
    &-dir {
      color: #2eefdb;
      padding: 0 5px;
      font-size: 8px;
    }
  }
}
</style>